<template>
  <div>
    <!-- 面包屑导航区域 -->
    <div class="bread_box">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>文章管理</el-breadcrumb-item>
        <el-breadcrumb-item>文章列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 卡片视图区域 -->
    <el-card class="box-card">
      <!-- 搜索与按钮区域 -->
      <el-form
        class="search_from"
        :model="searchForm"
        ref="searchFormRef"
        size="small"
        :inline="true"
        label-width="70px"
      >
        <el-form-item label="文章标题" prop="title">
          <el-input
            v-model="searchForm.title"
            placeholder="请输入文章标题"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="文章作者" prop="author">
          <el-input
            v-model="searchForm.author"
            placeholder="请输入作者名"
          ></el-input>
        </el-form-item>

        <el-form-item label="状态" prop="flag">
          <el-select v-model="searchForm.flag" placeholder="审核状态">
            <el-option label="已审核" value="true"></el-option>
            <el-option label="未审核" value="false"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="创建时间" prop="time">
          <el-date-picker
            v-model="searchForm.time"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="searchArticle()"
            >搜索</el-button
          >
          <el-button
            icon="el-icon-refresh"
            size="mini"
            @click="resetSearchForm()"
            >重置</el-button
          >
        </el-form-item>
      </el-form>

      <div>
        <el-button type="primary" icon="el-icon-plus" size="mini"
          >新增</el-button
        >
        <el-button type="success" icon="el-icon-edit" size="mini"
          >修改</el-button
        >
        <el-button type="danger" icon="el-icon-delete" size="mini"
          >删除</el-button
        >
        <el-button type="warning" icon="el-icon-download" size="mini"
          >导出</el-button
        >
      </div>

      <!-- 文章列表区域 -->
      <el-table
        :data="articleList"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
      >
        <!-- <el-table-column type="index"></el-table-column> -->
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="expand" label="详细">
          <template slot-scope="scope">
            <!-- {{scope.row}} -->
            <el-form label-position="right" class="articleDetailForm">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="文章 Id：">
                    <span>{{ scope.row.article.id }}</span>
                  </el-form-item>
                  <el-form-item label="文章标题：">
                    <span>{{ scope.row.article.title }}</span>
                  </el-form-item>
                  <el-form-item label="发布时间：">
                    <span>{{ scope.row.article.created }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="浏览量：">
                    <span>{{ scope.row.statistic.hits }}</span>
                  </el-form-item>
                  <el-form-item label="评论量：">
                    <span>{{ scope.row.statistic.commentsNum }}</span>
                  </el-form-item>
                  <el-form-item label="点赞量：">
                    <span>{{ scope.row.statistic.likes }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="文章摘要：">
                    <span class="limit_content">{{
                      scope.row.article.smallText
                    }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          label="文章标题"
          prop="article.title"
        ></el-table-column>
        <el-table-column
          label="发布时间"
          prop="article.created"
        ></el-table-column>
        <el-table-column label="作者" prop="author"></el-table-column>
        <el-table-column label="浏览量" prop="statistic.hits"></el-table-column>
        <el-table-column
          label="所属分类"
          prop="article.categories"
        ></el-table-column>
        <el-table-column label="审核">
          <template slot-scope="scope">
            <!-- {{scope.row.article}} -->
            <el-switch
              v-model="scope.row.article.flag"
              @change="articleFlagChanged(scope.row.article)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <!-- 编辑按钮 -->
            <el-button type="text" size="mini"
              ><i class="el-icon-edit"></i><span>编辑</span></el-button
            >
            <!-- 删除按钮 -->
            <el-button
              type="text"
              size="mini"
              @click="delArticle(scope.row.article)"
              ><i class="el-icon-delete"></i><span>删除</span></el-button
            >

            <!-- 分配角色按钮 -->
            <!-- <el-tooltip class="item" effect="dark" content="分配角色" placement="top" :enterable="false">
                            <el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
                        </el-tooltip> -->
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.cur"
        :page-sizes="[5, 8, 10, 20]"
        :page-size="pageInfo.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 获取文章列表的参数对象
      pageInfo: {
        cur: 1, // 当前页
        size: 5, // 页大小
        flag: '',
        leftTime: '',
        rightTime: ''
      },
      // 搜索条件表单
      searchForm: {
        title: '', // 文章标题
        author: '', // 文章作者
        flag: '', // 审核状态
        time: '' // 文章发布时间
      },
      // 文章列表
      articleList: [],
      total: 0
    }
  },
  methods: {
    // 获取文章列表
    async getArticleList () {
      const { data: res } = await this.$http.post('/article/adminSelect', this.pageInfo)
      console.log(res)
      if (res.code !== 200) return this.$message.error('获取文章列表失败！')
      // 文章列表赋值
      this.articleList = res.data.list
      this.total = res.data.total
    },
    // 根据搜索条件表单数据，查询文章列表
    async searchArticle () {
      this.pageInfo.flag = this.searchForm.flag
      this.pageInfo.leftTime = this.searchForm.time[0]
      this.pageInfo.rightTime = this.searchForm.time[1]
      this.getArticleList()
    },
    // 清空查询条件 searchForm 表单
    resetSearchForm () {
      this.$refs.searchFormRef.resetFields()
      this.pageInfo.flag = this.pageInfo.leftTime = this.pageInfo.rightTime = ''
      this.getArticleList()
    },
    // 监听 size 改变的事件
    handleSizeChange (newSize) {
      //   console.log(newSize)
      this.pageInfo.size = newSize
      this.getArticleList()
    },
    // 监听 cur 页码值 改变的事件
    handleCurrentChange (newCur) {
      //   console.log(newCur)
      this.pageInfo.cur = newCur
      this.getArticleList()
    },
    // 监听 switch 开关状态，实现审核
    async articleFlagChanged (articleInfo) {
      // 参数是一个对象，创建一个对象并对参数赋值
      var changeFlag = { id: articleInfo.id, flag: articleInfo.flag }
      const { data: res } = await this.$http.get('/article/setFlag', {
        params: changeFlag
      })
      console.log(res)
      if (res.code !== 200) {
        articleInfo.flag = !articleInfo.flag
        return this.$message.error('审核文章失败！')
      }
      if (articleInfo.flag) {
        return this.$message.success('审核文章成功！')
      } else {
        return this.$message.warning('取消审核文章成功！')
      }
    },
    // 根据文章id删除文章
    delArticle (info) {
      this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        console.log(info.id)
        const { data: res } = await this.$http.get(`/article/delete/${info.id}`)
        console.log(res)
        if (res.code !== 200) return this.$message.error('删除文章失败！')
        this.$message.success('删除文章成功！')
        this.getArticleList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  },
  created () {
    this.getArticleList()
  }
}
</script>

<style lang="less" scoped>
</style>

<style lang="less" >
.articleDetailForm {
  .el-form-item {
    .el-form-item__label {
      font-weight: 700 !important;
      line-height: 16px !important;
    }
    .el-form-item__content {
      line-height: 16px !important;
    }
    .limit_content {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }
  }
}
</style>
